<template>
  <div id="home">
    <Header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></Header>
    <Users v-bind:users="users"></Users>
    <Users v-bind:users="users"></Users>
    <Footer v-bind:title="title"></Footer>
  </div>
</template>

<script>
// 局部注册组件
import Users from "./Users";
import Header from "./Header";
import Footer from "./Footer";

export default {
  name: "home",
  data() {
    return {
      // title:'这是我的第一个Vue脚手架项目!'
      users: [
        
      ],
      title: "传递的是一个值,(number string boolean)",
      content: []
    };
  },
  methods:{
    updateTitle(title) {
      this.title = title;
    }
  },
  components: {
    Users,
    Header,
    Footer
  },

  created() {
      this.$axios.get("http://jsonplaceholder.typicode.com/posts").then(res => {
          this.users = res.data.slice(0, 10);
      });
  }
};
</script>

<style scoped lang="less">
h1 {
  color: purple;
}
</style>
